<template>
  <div class="management">
    <div class="login">
      <div class="ipt">
        <input type="text" placeholder="账号" v-model="store.username" />
        <span class="bottom"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="left"></span>
      </div>
      <div class="ipt">
        <input type="password" placeholder="密码" @keydown.enter="handelLogin" v-model="store.password" />
        <span class="bottom"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="left"></span>
      </div>
      <button @click="handelLogin">登录</button>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { useHomeStore } from "@/stores/home.js";
const store = useHomeStore();
const router = useRouter();
import URL from '@/api/url.js'
const handelLogin = () => {
  if (store.username && store.password) {
    axios
      .post(URL()+"/user/login", {
        username: store.username,
        password: store.password,
      })
      .then((item) => {
        console.log(item.data);
        if (item.data.code === 20000) {
          router.push("/managementTab");
          store.username = store.username
          store.password = store.password
        }else{
          ElMessage({
            message: item.data.message,
            type: "error",
          });
          store.password = ''
          store.username = ''
        }
      });
  }else{
    ElMessage({
            message: '账号密码不能为空！',
            type: "error",
          });
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 250px;
  height: 200px;
  margin: 150px auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-around;
  .ipt {
    position: relative;
    width: 217px;
    input {
      border-radius: 5px;
      width: 200px;
      color: white;
      font-size: inherit;
      font-family: inherit;
      background-color: hsl(236, 32%, 26%);
      padding: 0.35em 0.45em;
      border: 1px solid transparent;
      transition: background-color 0.3s ease-in-out;
    }

    input:focus {
      outline: none;
    }

    input::placeholder {
      color: hsla(0, 0%, 100%, 0.6);
    }

    span {
      position: absolute;
      background-color: #3cefff;
      transition: transform 0.5s ease;
    }

    .bottom,
    .top {
      height: 1px;
      left: 0;
      right: 0;
      transform: scaleX(0);
    }

    .left,
    .right {
      width: 1px;
      top: 0;
      bottom: 0;
      transform: scaleY(0);
    }

    .bottom {
      bottom: 0;
      transform-origin: bottom right;
    }

    input:focus ~ .bottom {
      transform-origin: bottom left;
      transform: scaleX(1);
    }

    .right {
      right: 0;
      transform-origin: top right;
    }

    input:focus ~ .right {
      transform-origin: bottom right;
      transform: scaleY(1);
    }

    .top {
      top: 0;
      transform-origin: top left;
    }

    input:focus ~ .top {
      transform-origin: top right;
      transform: scaleX(1);
    }

    .left {
      left: 0;
      transform-origin: bottom left;
    }

    input:focus ~ .left {
      transform-origin: top left;
      transform: scaleY(1);
    }
  }
  button {
    border-radius: 5px;
    z-index: 1;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    color: white;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: hsl(236, 32%, 26%);
    overflow: hidden;
    transition: color 0.4s ease-in-out;
  }

  button::before {
    content: "";
    z-index: -1;
    position: absolute;
    bottom: 100%;
    right: 100%;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #3cefff;
    transform-origin: center;
    transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0);
    transition: transform 0.45s ease-in-out;
  }

  button:hover {
    cursor: pointer;
    color: #161616;
  }

  button:hover::before {
    transform: translate3d(50%, 50%, 0) scale3d(15, 15, 15);
  }
}
</style>